<template>
	<view class="time_line">
		<view class="line_item" v-for="(item, index) in getOptions" :key="index">
			<view class="left">
				<view class="date">{{ item.date }}</view>
				<view class="day">{{ item.day }}</view>
			</view>
			<view class="point"></view>
			<view class="right">{{ item.content }}</view>

            <view v-if="index < getOptions.length - 1" class="link"></view>
		</view>
	</view>
</template>
<script>
import dayjs from "dayjs";

export default {
	props: {
		options: {
			type: Array,
			default() {
				return [
					{
						time: "2021-08-01 12:00:00",
						content: "订单完成",
					},
					{
						time: "2021-08-01 12:00:00",
						content: "转入中",
					},
					{
						time: "2021-08-01 12:00:00",
						content: "卖家接受出价",
					},
					{
						time: "2021-08-01 12:00:00",
						content: "出价中",
					},
				];
			},
		},
	},

	computed: {
		getOptions() {
			return this.options.map((item) => {
				const day = dayjs(item.time);
				return {
					day: day.format("YYYY MM/DD"),
					date: day.format("HH:mm:ss"),
					content: item.content,
				};
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.time_line {
	width: 100%;
	height: max-content;
    margin-bottom: 20rpx;

	.line_item {
		width: 100%;
		height: 44rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;

        position: relative;

		& + .line_item {
			margin-top: 60rpx;
		}

		.left {
			width: 20%;
			margin-right: 30rpx;

			font-weight: bold;
			font-size: 20rpx;

			text-align: right;
            line-height: 22rpx;

			.day {
				color: #999999;
			}

			.date {
				color: black;
			}
		}

		.point {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: rgba(35, 89, 248, 0.2);
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(35, 89, 248, 1);
				width: 12rpx;
				height: 12rpx;
				z-index: 2;
                border-radius: 50%;
			}
		}

		.right {
			padding-left: 40rpx;
			width: calc(100% - 20% - 30rpx - 20rpx);
			font-weight: 500;
			font-size: 24rpx;
			color: black;
		}

        .link {
            position: absolute;
            width: 4rpx;
            height: calc(44rpx + 60rpx);
            left: calc(20% + 30rpx + 10rpx - 2rpx);
            top: 22rpx;
            z-index: 1;
            background-color: #eeeeee;
        }
	}
}
</style>
